import React from 'react';
import './index.less';
import { Button, Space, Divider, message } from 'antd';
import {
  PlusOutlined,
  SearchOutlined,
  ReloadOutlined,
  ExportOutlined,
} from '@ant-design/icons';
import CommonForm from '@/components/form';
import request from '@/utils/umiRequest';

/**
 * 使用方法
import Search from '@/components/search';

import CommonForm from '@/components/form';
const formFileds = [
  { 
    formItem: {
      name: 'menuName', 
      label: '菜单名称',
      rules: [
        {
          required: true,
          message: '请输入菜单名称',
        },
      ],
    },
    formElement: {
      'el-type': 'input',
      placeholder: '请输入菜单名称'
    }
  },
];

<Search
  isHidenDivider={false}
  isHidenAdd={false}
  isHidenQuery={false}
  isHidenExport={false}
  isHidenReset={false}
  isHidenForm={false}
  formFileds={formFileds}
  appendSlot={()=>{
    return <Button icon={<ExportOutlined />}>appendSlot</Button>
  }}
  prependSlot={()=>{
    return <Button icon={<ExportOutlined />}>prependSlot</Button>
  }}
  defaultClick={this.defaultClick}
/>
 */

export default (props) => {
  const formRef = React.useRef(null);
  /**
   * props 属性
   * isHidenDivider 是否隐藏分割线
   * isHidenAdd 是否隐藏新增按钮
   * isHidenQuery 是否隐藏查询按钮
   * isHidenExport 是否隐藏导出按钮
   * isHidenReset 是否隐藏重置按钮
   * appendSlot 向原按钮后添加
   * prependSlot 向原按钮前添加
   * formFileds 表单字段元素
   * isHidenForm 是否隐藏表单
   * defaultClick 默认按钮点击事件回调
   *
   * exportTableName 导出-表名称
   * exportFileName 导出-文件名称
   */
  const {
    isHidenDivider = false,
    isHidenAdd = false,
    isHidenQuery = false,
    isHidenExport = false,
    isHidenReset = false,
    appendSlot = null,
    prependSlot = null,
    formFileds = [],
    isHidenForm = false,
    defaultClick = null,

    exportUrl = null,
    exportTableName = null,
    exportFileName = null,
  } = props || {};
  /**
   * 样式
   * 搜索区域条件包裹层-样式
   */
  const stylesSearchWrap = {
    backgroundColor: '#fff',
    padding: '15px 15px 15px 15px',
    marginBottom: 15,
  };
  /**
   * 样式
   * 搜索区域按钮包裹层-样式
   */
  const stylesSearchBtnWrap = {
    paddingTop: 15,
    display: 'flex',
    justifyContent: 'flex-end',
  };

  /**
   * 默认按钮组点击事件
   */
  const defaultBtnGroupEvent = async (type) => {
    const formElement = (formRef && formRef.current) || null;
    let values = {};
    switch (type) {
      case 'export':
        if (!exportUrl) {
          message.error('参数缺失');
          return;
        }
        request(exportUrl, {
          responseType: 'blob',
          headers: { 'Content-Type': 'application/json' },
          timeout: 1000 * 60,
          method: 'post',
        });
        break;
      case 'reset':
        formElement.resetFields();
        break;
      case 'query':
        try {
          values = await formElement.validateFields();
        } catch (errorInfo) {
          // console.log('Failed:', errorInfo);
        }
        break;
    }
    // 按钮点击回调到组件 传递类型 和 表单ref
    if (defaultClick && typeof defaultClick === 'function') {
      defaultClick(type, formElement, values);
    }
  };

  return (
    <React.Fragment>
      <div style={stylesSearchWrap}>
        {/* 表单元素 */}
        {!isHidenForm && Array.isArray(formFileds) && formFileds.length ? (
          <CommonForm ref={formRef} formFileds={formFileds} />
        ) : null}
        {/* 表单元素 */}
        {/* 隐藏分割线 */}
        {isHidenDivider ? null : <Divider style={{ margin: 0 }} />}
        {/* 隐藏分割线 */}
        <div style={stylesSearchBtnWrap}>
          <Space wrap align={'center'} size={[8, 0]}>
            {/* 向原按钮后添加 */}
            {prependSlot
              ? typeof prependSlot == 'function'
                ? prependSlot()
                : prependSlot
              : null}
            {/* 向原按钮后添加 */}
            {/* 是否隐藏新增按钮 */}
            {isHidenAdd ? null : (
              <Button
                icon={<PlusOutlined />}
                type="primary"
                onClick={() => defaultBtnGroupEvent('add')}
              >
                新 建
              </Button>
            )}
            {/* 是否隐藏新增按钮 */}
            {/* 是否隐藏查询按钮 */}
            {isHidenQuery ? null : (
              <Button
                icon={<SearchOutlined />}
                type="primary"
                onClick={() => defaultBtnGroupEvent('query')}
              >
                查 询
              </Button>
            )}
            {/* 是否隐藏查询按钮 */}
            {/* 是否隐藏导出按钮 */}
            {isHidenExport ? null : (
              <Button
                icon={<ExportOutlined />}
                onClick={() => defaultBtnGroupEvent('export')}
              >
                导 出
              </Button>
            )}
            {/* 是否隐藏导出按钮 */}
            {/* 是否隐藏重置按钮 */}
            {isHidenReset ? null : (
              <Button
                icon={<ReloadOutlined />}
                onClick={() => defaultBtnGroupEvent('reset')}
              >
                重 置
              </Button>
            )}
            {/* 是否隐藏重置按钮 */}
            {/* 向原按钮后添加 */}
            {appendSlot
              ? typeof appendSlot == 'function'
                ? appendSlot()
                : appendSlot
              : null}
            {/* 向原按钮后添加 */}
          </Space>
        </div>
      </div>
    </React.Fragment>
  );
};
